<template>
	<view>
		<view class="wrap">
			<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
			<u-navbar back-icon-color="#fff" :border-bottom="false" height="44" :background="{ background: 'none' }">

				<view class="title">
					分类
				</view>
			</u-navbar>

			<scroll-view scroll-x="true" class="data-list">
				<view v-for="(item, index) in 8" @click="changeTab(index)" :key="index" class="data-list-item"
					:class="{active:index==cur}">
					<view class="imgCont">
						<view class="bgs">
							<image class="image" src="@/static/icon/10.png">
							</image>
							<view class="mask">
								<view class="num">
									235+
								</view>
							</view>
						</view>
						<image class="decoration"
							src="https://tb.wuyouzhuan888.com/applet-icon/decoration.png" mode="">
						</image>
					</view>
					<view class="name">
						每日好图
					</view>

				</view>
			</scroll-view>
			<view class="waterfall">
				<waterfall />
			</view>
		</view>
	</view>

</template>
<script>
	import waterfall from '@/components/waterfall1';
	export default {
		components: {

			waterfall,

		},
		data() {
			return {
				cur: 0
			};
		},
		onLoad() {

		},
		methods: {
			changeTab(index) {
				this.cur = index
			}
		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 0 0 0 32rpx;

		/deep/ .u-tab-bar {
			margin-left: -3px !important;
		}

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}

	}
	.waterfall{
		margin-right: 32rpx;
	}


	.data-list {
		width: 100%;
		white-space: nowrap;
		margin: 24rpx 0 10rpx 0;
	}

	.data-list-item {
		display: inline-block;
		margin-right: 24rpx;


		.imgCont {
			display: flex;
			flex-direction: column;

			.bgs {
				position: relative;

				.mask {
					background: rgba(255, 255, 255, 0.11);
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 20rpx;

					.num {
						display: inline-flex;
						padding: 4rpx 12rpx;
						background: rgba(0, 0, 0, 0.40);
						border-radius: 33rpx;
						font-size: 20rpx;
						font-family: PingFang HK-Regular, PingFang HK;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.image {
				width: 143rpx;
				height: 143rpx;

				border-radius: 20rpx;
				border: 2rpx solid transparent !important;
			}

			.decoration {
				width: 127rpx;
				height: 14rpx;
				margin: -10rpx auto 0;
			}
		}

		&.active {
			.decoration {

				margin: -8rpx auto 0;
			}

			.image {
				// background: rgba(255,255,255,0.11);
				// border-radius: 20px 20px 20px 20px;
				// opacity: 1;
				// border: 2px solid #FFFFFF;
				border: 2rpx solid #FFFFFF !important;

			}
		}


		.name {
			font-size: 25rpx;
			font-family: PingFang HK-Light, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;
			margin-top: 6rpx;
			text-align: center;
				width: 73px;
			  /* 不同浏览器有不同的前缀，比如-moz-box */
			        display: -webkit-box;
			        /* 子元素的排列方式：垂直排列 */
			        -webkit-box-orient: vertical;
			        /* 设置3行文本之后打点显示 */
			        -webkit-line-clamp: 1;
			        /* 超出盒子部分隐藏显示 */
			        overflow: hidden;
			
		}
	}
</style>
